document.addEventListener("DOMContentLoaded", function() {
  const messageList = document.getElementById("message-list");
  const userMessageInput = document.getElementById("user-message");
  const submitButton = document.getElementById("submit-button");

  // 点击提交按钮时的事件处理函数
  submitButton.addEventListener("click", function() {
    const userMessage = userMessageInput.value;
    if (userMessage.trim() !== "") {
      const currentDate = new Date();
      const messageItem = createMessageItem(userMessage, currentDate);
      messageList.appendChild(messageItem);
      userMessageInput.value = "";
    }
  });

  // 创建留言项
  function createMessageItem(message, date) {
    const messageItem = document.createElement("div");
    messageItem.classList.add("message-item");

    const avatarIcon = document.createElement("i");
    avatarIcon.classList.add("fa", "fa-user-circle");
    avatarIcon.style.marginRight = "10px";

    const messageText = document.createElement("span");
    messageText.textContent = message;

    const messageDate = document.createElement("span");
    messageDate.textContent = formatDate(date);
    messageDate.style.marginLeft = "10px";
    messageDate.style.fontSize = "12px";
    messageDate.style.color = "gray";

    messageItem.appendChild(avatarIcon);
    messageItem.appendChild(messageText);
    messageItem.appendChild(messageDate);

    return messageItem;
  }

  // 格式化日期
  function formatDate(date) {
    const options = { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" };
    return date.toLocaleDateString("en-US", options);
  }
});